<template>
  <div id="barEcharts" style="height:450px;"></div>
</template>
<script>
    import * as echarts from "echarts";

    export default {
        props: {
            data: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                barEcharts: null
            }
        },
        created() {
            let d = [];
            d.push(['product', '正常', '异常']);
            this.data.map((i, indx) => {
                d.push([i.gameName, i.normalInt, i.abnormaInt]);
            });
            this.$nextTick(() => {
                this.barEcharts = echarts.init(document.getElementById('barEcharts'), "macarons");
                this.barEcharts.setOption({
                    tooltip: {},
                    legend: {
                        left: '5%',
                        top: '1%',
                        padding: 20,
                        itemHeight: 20,
                        itemWidth: 40,
                        selectedMode: false
                    },
                    dataset: {
                        source: d
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    grid: {
                        top: '16%',
                        bottom: '5%',
                    },
                    series: [{
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#99A7FE'}, // 深蓝色
                                        {offset: 1, color: '#5870FE'}  // 绿色
                                    ]
                                )
                            }
                        }
                    }, {
                        type: 'bar', itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#FFD75E'}, // 深蓝色
                                        {offset: 1, color: '#F2B703'}  // 绿色
                                    ]
                                )
                            }
                        }
                    }]
                });

                let that = this;
                window.addEventListener('resize', () => {
                    that.barEcharts.resize()
                });
            })
        }
    }
</script>
